<template>
	<div class="setting">
		<div class="title">店铺信息</div>
		<el-form :model="settingForm" :rules="rules" ref="settingForm" label-width="100px">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="店铺名:" prop="store_name"><el-input v-model="settingForm.store_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="客服电话:" prop="service_phone"><el-input v-model="settingForm.service_phone"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="省:" prop="province">
						<el-select v-model="settingForm.province" placeholder="省" @change="province">
							<el-option v-for="item in cityJson" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="市:" prop="city">
						<el-select v-model="settingForm.city" placeholder="市" @change="citySelect">
							<el-option v-for="item in cityList1" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="区:" prop="area">
						<el-select v-model="settingForm.area" placeholder="区">
							<el-option v-for="item in areaList1" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="详细地址:" prop="address"><el-input v-model="settingForm.address"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="合同简称:" prop="abbreviation"><el-input v-model="settingForm.abbreviation"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="佣金比例:" prop="commission_coefficient"><el-input v-model="settingForm.commission_coefficient"> <template slot="append">%</template></el-input></el-form-item>
				</el-col>
				
				<!-- <el-col :span="8">
					<el-form-item label="公司全称:" prop="abbreviation"><el-input v-model="settingForm.abbreviation"></el-input></el-form-item>
				</el-col> -->
				<el-col :span="8">
					<el-form-item label="设计师名称:" prop=""><el-input v-model="settingForm.designer_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="设计师电话:" prop=""><el-input v-model="settingForm.designer_phone"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="财务名称:" prop=""><el-input v-model="settingForm.finance_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="财务电话:" prop=""><el-input v-model="settingForm.finance_phone"></el-input></el-form-item>
				</el-col>
				
				<el-col :span="8">
					<el-form-item label="注册人:" prop="contract_name"><el-input v-model="settingForm.contract_name"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="注册人电话:" prop="contract_phone"><el-input v-model="settingForm.contract_phone"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="对接人:" prop=""><el-input v-model="settingForm.linkman"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="对接人电话:" prop=""><el-input v-model="settingForm.linkman_phone"></el-input></el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="性质:" prop="type">
						<el-select v-model="settingForm.type" placeholder="请选择">
							<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="合作类型:" prop="store_type">
						<el-select v-model="settingForm.store_type" placeholder="请选择">
							<el-option v-for="item in storeTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="培训:" prop="is_train">
						<el-select v-model="settingForm.is_train" placeholder="请选择">
							<el-option v-for="item in isTrainList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="店铺等级">
						<el-select v-model="settingForm.level">
							<el-option v-for="item in levelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="模板">
						<el-select v-model="settingForm.template_id">
							<el-option v-for="item in templateList" :key="item.template_id" :label="item.template_name" :value="item.template_id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="供货方">
						<el-input v-model="settingForm.supplier_name"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="客户需求收集:" prop="demand">
						<el-input type="textarea" placeholder="如：转型做整屋/软装供应链/微店工具/平台销售工具及活动策划" v-model="settingForm.demand" rows="3"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="承诺客户的内容及政策:" prop="promise">
						<el-input type="textarea" placeholder="如：送产品图册/装饰开业活动策划/送酷家乐普通会员账号" v-model="settingForm.promise" rows="3"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="其他备注:">
						<el-input type="textarea" placeholder="如：报价不可以发，目前准备做样板间，需要小区拎包资料" v-model="settingForm.remarks" rows="3"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="其他备注2:">
						<el-input type="textarea" placeholder="如：报价不可以发，目前准备做样板间，需要小区拎包资料" v-model="settingForm.remarks_two" rows="3"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="其他备注3:">
						<el-input type="textarea" placeholder="如：报价不可以发，目前准备做样板间，需要小区拎包资料" v-model="settingForm.remarks_three" rows="3"></el-input>
					</el-form-item>
				</el-col>
				
				<el-col :span="24">
					<el-form-item label="客户背景:" prop="background_desc">
						<el-input type="textarea" placeholder="" v-model="settingForm.background_desc" rows="3"></el-input>
					</el-form-item>
				</el-col>
				

				<el-col :span="24">
					<el-form-item label="店铺简介:" prop="brief"><el-input type="textarea" v-model="settingForm.brief" rows="3"></el-input></el-form-item>
				</el-col>
			</el-row>
			<div class="title">
				店铺LOGO
				<el-tag type="primary">图片仅限JPG\PNG格式，图片大小≤500KB</el-tag>
			</div>
			<el-form-item>
				<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(1, res); } " multipleaccept="image/*" > <el-image v-if="settingForm.store_logo" :src="settingForm.store_logo" class="avatar" fit="cover" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<el-button type="primary" size="small" @click="rest('logo')">重置</el-button>
			</el-form-item>
			<div class="title">
				店铺背景图
				<el-tag type="primary">仅限JPG\PNG的长方形图片，图片大小≤500KB</el-tag>
			</div>
			<el-form-item>
				<div class="bg">
					<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(2, res); } " multipleaccept="image/*" > <el-image v-if="settingForm.backgroundimg" :src="settingForm.backgroundimg" class="avatar" fit="contain" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<el-button type="primary" size="small" @click="rest('bg')">重置</el-button>
				</div>
			</el-form-item>
			<el-form-item><el-button type="primary" @click="submitForm('settingForm')">确定</el-button></el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	props: {
		layerid: {
			type: String,
			default: ''
		},
		storeId: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			cityJson: '',
			cityList1: '',
			areaList1: '',
			option: [
				{
					label: '普通商户',
					value: 1
				},
				{
					label: '装饰公司',
					value: 2
				},
				{
					label: '定制企业',
					value: 3
				}
			],
			storeTypeList: [
				{
					label: '直营店',
					value: 1
				},
				{
					label: '专卖店',
					value: 2
				},
				// {
				// 	label: '分销店',
				// 	value: 4
				// },
				// {
				// 	label:"旗舰店",
				// 	value:6
				// }
			],
			isTrainList: [
				{
					label: '未培训',
					value: 1
				},
				{
					label: '已培训',
					value: 2
				}
			],
			levelList:[
				{
					label:"未设置",
					value:0
				},
				{
					label:"A",
					value:1
				},
				{
					label:"B",
					value:2
				},
				{
					label:"C",
					value:3
				},
				{
					label:"D",
					value:4
				},
				{
					label:"内部",
					value:5
				},
				{
					label:"新店",
					value:6
				},
				{
					label:"定制",
					value:7
				}
			],
			settingForm: {
				background_desc:'',
				store_name: '',
				service_phone: '',
				address: '',
				brief: '',
				demand: '',
				promise: '',
				store_logo: '',
				backgroundimg: '',
				linkman: '',
				linkman_phone: '',
				abbreviation: '',
				type: '',
				store_type: '',
				is_train: '',
				remarks: '',
				remarks_two: '',
				remarks_three: '',
				province: '',
				city: '',
				area: '',
				level:4,
				template_id:0,
				supplier_name:"",
				commission_coefficient: ''
			},
			rules: {
				// store_name: [{ required: true, message: '请输入店铺名' }],
				// service_phone: [{ required: true, message: '请输入客服电话' }],
				// address: [{ required: true, message: '请输入地址' }],
				province:[{required:true,message:"请选择省份",trigger: 'change'}],
				city:[{required:true,message:"请选择市",trigger: 'change'}],
				area:[{required:true,message:"请选择区",trigger: 'change'}],
				abbreviation: [{ required: true, message: '请输入合同简称' }],
				contract_phone: [{ required: true, message: '请输入注册人电话' }],
				contract_name: [{ required: true, message: '请输入注册人' }],
				type: [{ required: true, message: '请选择性质类型' }],
				store_type: [{ required: true, message: '请选择合作类型' }],
				// is_train: [{ required: true, message: '是否已经培训' }],
				demand: [{ required: true, message: '请输入需求' }],
				promise: [{ required: true, message: '请输入内容' }],
				background_desc: [{ required: true, message: '请输入背景内容' }],
				commission_coefficient: [{ required: true, message: '请输入佣金比例' }],
				// brief: [{ required: true, message: '请输入店铺简介' }],
			},
			templateList:[]
		};
	},
	methods: {
		init() {
			this.cityJson = require('@/utils/city.json');
			// 店铺信息
			let sdata = {
				store_id: this.storeId
			};
			this.settingForm.store_id = this.storeId;
			this.$http(this.$ApiList.StoreInfo, sdata).then(res => {
				if (res.datas == null) {
					return;
				}
				this.settingForm = res.datas;
				for (let i in this.cityJson) {
					if (this.cityJson[i].areaId == this.settingForm.province) {
						this.cityList1 = this.cityJson[i].cities;
					}
				}
				for (let j in this.cityList1) {
					if (this.cityList1[j].areaId == this.settingForm.city) {
						this.areaList1 = this.cityList1[j].cities;
					}
				}
			});
			this.getTemplateItems();
		},
		// 图片上传
		upload(type, params) {
			const file = params.file,
				fileType = file.type,
				isJPGPNG = file.type === 'image/jpeg' || 'image/png',
				isLt1MB = file.size / 1024 <= 1024;
			if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于1M');
				return;
			}
			const form = new FormData();
			form.append('file[]', file);
			this.$http(this.$ApiList.publicUpload, form).then(res => {
				switch (Number(type)) {
					case 1:
						this.settingForm.store_logo = res.datas[0];
						break;
					case 2:
						this.settingForm.backgroundimg = res.datas[0];
						break;
				}
			});
		},

		rest(e) {
			if (e === 'logo') {
				this.settingForm.store_logo = '';
			} else {
				this.settingForm.backgroundimg = '';
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.UpStore, this.settingForm).then(res => {
						if (res.code == 200) {
							this.$layer.msg('修改成功');
							this.$parent.init(this.$parent.page);
							this.cancel();
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		cancel() {
			this.$layer.close(this.layerid);
		},
		province() {
			for (let i in this.cityJson) {
				if (this.cityJson[i].areaId == this.settingForm.province) {
					this.cityList1 = this.cityJson[i].cities;
				}
			}
			this.settingForm.city = this.cityList1[0].areaId;
			this.citySelect();
		},
		citySelect() {
			for (let i in this.cityList1) {
				if (this.cityList1[i].areaId == this.settingForm.city) {
					this.areaList1 = this.cityList1[i].cities;
				}
			}
			this.settingForm.area = this.areaList1[0].areaId;
		},
		getTemplateItems(){
			this.$http(this.$ApiList.TemplateItems).then(res=>{
				this.templateList = res.datas;
				this.templateList.unshift({template_id: 0, template_name: "未设置"});
			})
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss">
.setting {
	padding: 20px;
	flex: 1;
	.avatar-uploader {
		display: inline-block;
		vertical-align: bottom;
		margin-right: 20px;
	}
	.bg {
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 150px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
		.avatar {
			width: 150px;
			height: 100px;
			display: block;
		}
	}
	.el-form-item {
		display: block;
		.el-form-item__content {
			display: block;
		}
		&:last-child {
			margin-bottom: 20px;
		}
		/deep/ .el-textarea__inner::-webkit-textarea-placeholder{
			color:#c0c4cc
		}
	}
}
</style>
